<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div>
        <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
          <el-form-item label="关键词：" prop="keyword">
            <el-input
              v-model="query.keyword"
              clearable
              placeholder="手机号/微信昵称/姓名"
              style="width: 180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="银行卡绑定：" prop="is_bind">
            <el-select v-model="query.is_bind" clearable placeholder="请选择" class="filter-item" style="width: 180px">
              <el-option v-for="item in levelTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="所属客服：" prop="custom_name">
            <el-input
              v-model="query.custom_name"
              clearable
              placeholder="请输入"
              style="width: 180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="所属部门：" prop="sys_group_name">
            <el-input
              v-model="query.sys_group_name"
              clearable
              placeholder="请输入"
              style="width: 180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item v-permission="['EQUITY']" label="权益卡：" prop="equity">
            <el-select v-model="query.equity" clearable placeholder="请选择" class="filter-item" style="width: 180px">
              <el-option
                v-for="item in equityCard"
                :key="item.equity_id"
                :label="item.equity_name"
                :value="item.equity_id"/>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <div class="operate-container">
          <div/>
          <div style="display: flex;">
            <!--绑定-->
            <el-button
              :disabled="$refs.table && $refs.table.selection.length === 0"
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="bindingCard">绑定提现银行卡</el-button>
            <el-button
              v-permission="['EQUITY']"
              :disabled="$refs.table && $refs.table.selection.length === 0"
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-setting"
              @click="equityCardClick">设置权益卡
            </el-button>
            <!-- 导入 -->
            <el-upload
              :show-file-list="false"
              :multiple="false"
              :on-success="successUpload"
              :before-upload="interceptBeforeUpload"
              :action="workersInfoUpload"
              :data="companyId"
              style="margin: 0 10px 0 10px"
              class="avatar-uploader">
              <el-button
                :loading="uploadLoading"
                size="mini"
                class="filter-item"
                type="success"
                icon="el-icon-upload2">导入</el-button>
            </el-upload>
            <!-- 导出 -->
            <el-button
              :loading="downloadLoading"
              size="mini"
              class="filter-item"
              type="warning"
              icon="el-icon-download"
              @click="download">导出</el-button>
          </div>
        </div>
      </div>
      <!--绑定银行卡子组件，弹框-->
      <binding ref="bindingModel"/>
      <!--设置权益卡-->
      <set-equity-card ref="setEquityCard"/>
      <!--表格渲染-->
      <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
        <el-table-column type="selection" />
        <el-table-column label="客户编号" prop="user_id" align="center" />
        <el-table-column label="手机号码" prop="phone" align="center" />
        <el-table-column label="微信编号" prop="unionid" show-overflow-tooltip width="120" align="center" />
        <el-table-column label="微信昵称" prop="nickname" align="center" />
        <el-table-column label="会员类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.member_type === 0">非会员</div>
            <div v-else-if="scope.row.member_type === 1">消费会员</div>
            <div v-else>推广会员</div>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPermission(['EQUITY'])" label="权益卡">
          <template slot-scope="scope">
            <div v-for="(item, index) in equityCard" :key="index">
              <span v-if="item.equity_id === scope.row.equity_id">{{ item.equity_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属客服" prop="custom_name" align="center" />
        <el-table-column label="所属部门" prop="sys_group_name" align="center" />
        <el-table-column label="绑定银行卡" prop="bankInfo" show-overflow-tooltip width="120" align="center" />
        <el-table-column label="加入时间" prop="create_time" width="120" align="center" />
        <el-table-column label="最后交易时间" prop="last_buy_time" width="120" align="center" />
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import binding from './binding'
import checkPermission from '@/utils/permission' // 权限判断函数
import setEquityCard from './setEquityCard'
import { downloadWorkers } from '@/api/mall/workers'
import { downloadFile } from '@/utils/index'
import { getEquityCard } from '@/api/mall/customer'
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
export default {
  components: { binding, setEquityCard },
  mixins: [initData],
  data() {
    return {
      levelTypeOptions: [
        { key: '1', display_name: '是' },
        { key: '0', display_name: '否' }
      ],
      query: {
        keyword: '',
        is_bind: ''
      },
      companyId: {
        company_id: 0
      },
      equityCard: [],
      uploadLoading: false,
      downloadLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'workersInfoUpload'
    ])
  },
  created() {
    // 当前页面接收公司id
    this.companyId.company_id = Cookies.get('company_id')
    // 获取员工列表
    this.$nextTick(() => {
      this.init()
    })
    // 获取权益卡
    getEquityCard().then(result => {
      this.equityCard = result
    })
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/workers-list'
      const sort = 'create_time,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      this.queryScreen()
      return true
    },
    queryScreen() {
      const query = this.query
      const keyword = query.keyword
      const is_bind = query.is_bind
      const custom_name = query.custom_name
      const sys_group_name = query.sys_group_name
      const equity = query.equity
      if (keyword !== '' && keyword !== undefined) { this.params['keyword'] = keyword }
      if (is_bind !== '' && is_bind !== undefined) { this.params['is_bind'] = is_bind }
      if (custom_name !== '' && custom_name !== undefined) { this.params['custom_name'] = custom_name }
      if (sys_group_name !== '' && sys_group_name !== undefined) { this.params['sys_group_name'] = sys_group_name }
      if (equity !== '' && equity !== undefined) { this.params['equity'] = equity }
    },
    download() {
      this.downloadLoading = true
      this.queryScreen()
      downloadWorkers(this.params).then(result => {
        downloadFile(result, '员工列表', 'xls')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    equityCardClick() {
      // 权益卡
      this.$refs.setEquityCard.dialog = true
      this.$refs.setEquityCard.form.ids = this.getTableSelectId()
      // 所有的权益卡对象传入子组件
      this.$refs.setEquityCard.equityCard = this.equityCard
    },
    getTableSelectId() {
      // 获取表格选中的id
      const dataSelect = this.$refs.table.selection
      const array = []
      for (let i = 0; i < dataSelect.length; i++) {
        array.push(dataSelect[i].user_id)
      }
      return array
    },
    bindingCard() {
      // 绑定银行卡
      const dataSelect = this.$refs.table.selection
      const array = []
      for (let i = 0; i < dataSelect.length; i++) {
        array.push(dataSelect[i].user_id)
      }
      this.$refs.bindingModel.dialog = true
      this.$refs.bindingModel.form.user_ids = array
    },
    resetQuery() {
      this.$refs['query'].resetFields()
      // 重新请求数据
      this.init()
    },
    successUpload(res) {
      if (res) {
        // 上传成功
        this.uploadLoading = false
        this.$message.success('上传成功')
        this.init()
      } else {
        // 上传失败
        this.uploadLoading = false
        this.$message.error('上传失败')
      }
    },
    interceptBeforeUpload(file) {
      // 上传前的拦截文件类型，文件大小校验
      const isXLS = file.type === 'application/vnd.ms-excel'
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isXLS && !isXLSX) {
        this.$message.error('上传只能是 Excel 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 2MB!')
        return false
      }
      this.uploadLoading = true
      return true
    }
  }
}
</script>

<style scoped>

</style>
